<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>用户管理</title>
  <link rel="stylesheet" href="../../layui/css/layui.css" media="all">
  <link rel="stylesheet" href="../../layui/css/modules/layer/default/layer.css">
  <link rel="stylesheet" href="../../CSS/layerPopup.css">
  <link rel="stylesheet" href="./../../JS/ztreev3/css/demo.css">
  <link rel="stylesheet" href="../../JS/ztreev3/css/bootstrapStyle/bootstrapStyle.css ">
  <link rel="stylesheet" href="../../CSS/media.css">
  <style>
    .userManage_body {
      background-color: rgb(255, 255, 255);
      width: 80%;
      margin: 20px auto;
      overflow-x: hidden;
    }

    .showGruop {
      display: none;
    }

    .user_search {
      height: 30px;
      width: 100%;
      text-align: center;
      margin: 0px auto 20px;
      ;
      box-sizing: border-box;
      padding: 20px;
    }

    .layui-layer-setwin a:hover {
      background-color: none !important;
    }

    .layui-form-select dl dd.layui-this {
      background-color: #00aeff !important;
    }

    .layui-form-radioed>i,
    .layui-form-radio>i:hover {
      color: #00aeff !important;
    }

    /* .layui-layer-title{
            background-color: #00aeff !important;
        }
        .layui-layer-setwin .layui-layer-close1 {
                background-position: -85px -40px;
        } */
    .HeadPortrait {
      display: block;
      width: 60px;
      height: 60px;
    }

    .btn {
      width: 60px !important;
    }

    .reset,
    .unlock {
      height: 35px !important;
      line-height: 35px !important;
      padding: 0 10px !important;
    }

    .reset {
      margin-right: 15px !important;
    }

    .ztree {
      box-sizing: border-box;
    }

    ul,
    li {
      list-style: none;
    }

    .operate {
      float: left;
      display: none;
      width: 80px;
      height: auto;
      padding: 8px 0px;
      box-sizing: border-box;
      border-radius: 4px;
      /* border: solid 1px black; */
      /* height: 30px; */
      background-color: #1E9FFF;
      position: absolute;
      color: #fff;
      z-index: 99 !important;
    }

    .operate ul li {
      line-height: 27px;
      cursor: pointer;
      line-height: 30px;
      text-align: center
    }

    .operate ul li:hover {
      text-decoration: underline;
    }

    .s_btn {
      width: 40%;
      /* float: right; */
      position: relative;
      margin: 0 auto;
      margin-top: 12px;
    }

    .s_btn i {
      font-size: 38px;
      color: #fff;
      position: absolute;
      /* top: 30px; */
      cursor: pointer;
      background: #1E9FFF;
      text-align: center;
      border-top-right-radius: 5px;
      border-bottom-right-radius: 5px;
      padding: 4px;
    }

    .s_btn input {
      height: 50px;
      background: #f1f1f1;
      border: none;
      font-size: 16px;
      width: 80%;
      display: inline-block;
    }

    .layui-form-label {
      font-size: 14px !important;
    }

    .layui-input-block input {
      font-size: 14px !important;
    }

    select option {
      font-size: 14px !important;
    }

    .layui-laypage .layui-laypage-curr .layui-laypage-em {
      background-color: #1E9FFF !important;
    }

    .layui-table-page {
      text-align: right;
    }

    .layui-laypage-prev i:hover,
    .layui-laypage-next i:hover {
      color: #1E9FFF !important;
    }
    #correctpupop .layui-form-select dl {
        max-height: 152px;
    }
  </style>
</head>

<body class="userManage_body">
  <div class="operate">
    <ul>
      <li id="addgroup" onclick="addgroup(this)">添加分组</li>
      <li id="delgroup" onclick="delgroup(this)">删除分组</li>
      <li id="addUser" onclick="addUser(this)">添加用户</li>
    </ul>
  </div>
  <div class="layui-row layui-col-space20">
    <div class="layui-col-md2">
      <div style="box-shadow: 0 4px 11px 0px #bbbbbb;height: 700px;margin: 0px;padding: 1px; ">
        <div class="s_btn" style="width:80%; height:30px;margin-top: 15px;">
          <input type="text" name="title" placeholder="请输入查询内容" autocomplete="off" class="layui-input search"
            style="height:30px;font-size: 12px; text-align: left;">
          <i class="layui-icon " style="font-size: 19px;">&#xe615;</i>
        </div>
        <!-- <div class="layui-row user_search">
                <input type="text" name="userinfo" required lay-verify="required" placeholder="请输入查询内容" autocomplete="off"
                       class="layui-input layui-col-md6" style="width:70%;height: 30px;">
                <button type="button" class="layui-btn layui-col-md6" style="width: 30px;height: 30px;padding:0px;background-size:30px 30px;background-image:url('../../static/IMG/Common/search.png')">
                </button>
            </div> -->
        <div id="control" style="height:640px">
          <ul class="ztree" id="UserTree" style="margin-top: 10px;"></ul>
        </div>
      </div>
    </div>
    <div class="layui-col-md10">
      <div style="box-shadow: 0 4px 11px 0px #bbbbbb; margin: 0px;padding: 10px;">
        <!-- <div class="user_func_btn">
                <button type="button" class="layui-btn layui-btn-sm layui-btn-normal showGruop"> 显示分组</button>
                <button type="button" class="layui-btn layui-btn-sm layui-btn-normal addUser"><i class="layui-icon ">&#xe624;</i> 添加用户</button>
                <button type="button" class="layui-btn layui-btn-sm layui-btn-normal addgroup"> <i class="layui-icon ">&#xe624;</i> 添加分组</button>
            </div> -->
        <table class="layui-hide" id="UserTab" lay-filter="useruv"></table>
        <script type="text/html" id="operate">
                <!-- 这里的 checked 的状态只是演示 -->
        <a class='layui-btn layui-btn-sm layui-btn-normal' lay-event="edit">修改</a>
        <a class='layui-btn layui-btn-sm layui-btn-danger' lay-event="del">删除</a>
        </script>
      </div>
    </div>
  </div>
  <!-- 添加用户弹窗 -->
  <div id="Userpopup" style="display: none;">
    <form class="layui-form" action="" style="margin-top: 8px;box-sizing: border-box;padding-right: 15px;">
      <div class="layui-form-item">
        <label class="layui-form-label">用户名</label>
        <div class="layui-input-block">
          <input type="text" id="username" name="username" lay-verify="title" autocomplete="off" placeholder="请输入用户名"
            class="layui-input">
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">昵称</label>
        <div class="layui-input-block">
          <input type="text" id="nickname" name="nickname" lay-verify="title" autocomplete="off" placeholder="请输入昵称"
            class="layui-input">
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">头像</label>
        <div class="layui-input-block">
          <img class="HeadPortrait" src="./../../static/IMG/Personal/photo.png" alt="">
          <!-- <input type="text" name="nickname" lay-verify="title" autocomplete="off" placeholder="请输入昵称" class="layui-input"> -->
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">性别</label>
        <div class="layui-input-block">
          <input type="radio" name="sex" value="男" title="男" checked="">
          <input type="radio" name="sex" value="女" title="女">
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">所属部门</label>
        <div class="layui-input-block">
          <input type="text" id="dep" name="type" lay-verify="type" autocomplete="off" placeholder="所属部门" readonly
            class="layui-input">
        </div>
      </div>
      <!-- <div class="layui-form-item">
            <label class="layui-form-label">权限</label>
            <div class="layui-input-block">
              <select id="limits" name="system" lay-filter="system">
                <option value=""></option>
                <option value="0">一般用户</option>
                <option value="0">数据编辑者</option>
              </select>
            </div>
          </div> -->
      <div class="layui-form-item">
        <label class="layui-form-label">手机</label>
        <div class="layui-input-block">
          <input type="text" id="phone" name="phone" lay-verify="title" autocomplete="off" placeholder="请输入手机号"
            class="layui-input">
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">邮箱</label>
        <div class="layui-input-block">
          <input type="text" id="emails" name="emails" lay-verify="title" autocomplete="off" placeholder="请输入邮箱"
            class="layui-input">
        </div>
      </div>
      <div class="layui-form-item">
        <div class="layui-input-block">
          <button type="submit" class="layui-btn layui-btn-normal saveUser" lay-submit=""
            lay-filter="increase">添加</button>
        </div>
      </div>
    </form>
  </div>
  <!-- 修改用户弹窗 -->
  <div id="correctpupop" style="display: none;">
    <form class="layui-form" action="" style="margin-top: 8px;box-sizing: border-box;padding-right: 15px;">
      <div class="layui-form-item">
        <label class="layui-form-label">用户名</label>
        <div class="layui-input-block">
          <input type="text" id="correctname" name="username" lay-verify="title" autocomplete="off" placeholder="请输入用户名"
            class="layui-input">
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">昵称</label>
        <div class="layui-input-block">
          <input type="text" id="correctnick" name="nickname" lay-verify="title" autocomplete="off" placeholder="请输入昵称"
            class="layui-input">
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">密码</label>
        <div class="layui-input-block">
          <!-- <img class="HeadPortrait" src="./../../static/IMG/HeadPortrait/portrait_04.png" alt=""> -->
          <button type="button" class="layui-btn layui-btn-normal reset" lay-submit="" lay-filter="reset">重置密码</button>
          <button type="submit" class="layui-btn layui-btn-normal unlock" lay-submit="" lay-filter="unlock">解锁</button>
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">性别</label>
        <div class="layui-input-block">
          <input type="radio" name="sexy" value="男" title="男" checked="">
          <input type="radio" name="sexy" value="女" title="女">
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">所属部门</label>
        <div class="layui-input-block">
          <select id="dept" name="dept" lay-filter="dept">
            <!-- <option value=""></option>
                <option value="0">部门一</option>
                <option value="0">部门二</option> -->
          </select>
        </div>
      </div>
      <!-- <div class="layui-form-item">
            <label class="layui-form-label">权限</label>
            <div class="layui-input-block">
              <select id="limitM" name="system" lay-filter="system">
                <option value=""></option>
                <option value="0">一般用户</option>
                <option value="0">数据编辑者</option>
              </select>
            </div>
          </div> -->
      <div class="layui-form-item">
        <label class="layui-form-label">手机</label>
        <div class="layui-input-block">
          <input type="text" id="phoneM" name="phone" lay-verify="title" autocomplete="off" placeholder="请输入手机号"
            class="layui-input">
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">邮箱</label>
        <div class="layui-input-block">
          <input type="text" id="emailM" name="emails" lay-verify="title" autocomplete="off" placeholder="请输入邮箱"
            class="layui-input">
        </div>
      </div>
      <div class="layui-form-item">
        <div class="layui-input-block">
          <button type="submit" class="layui-btn layui-btn-normal updateUser" lay-submit=""
            lay-filter="update">更新</button>
        </div>
      </div>
    </form>
  </div>
  <!-- 添加分组弹窗 -->
  <div id="Grouppopup" style="display: none;">
    <form class="layui-form" action="" style="margin-top: 8px;box-sizing: border-box;padding-right: 15px;">
      <div class="layui-form-item">
        <label class="layui-form-label">分组名称</label>
        <div class="layui-input-block">
          <input id="gName" type="text" name="usetname" lay-verify="title" autocomplete="off" placeholder="请输入分组名称"
            class="layui-input">
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">角色</label>
        <div class="layui-input-block">
          <select id="roleAdd" name="roleAdd" lay-filter="roleAdd">
            <!-- <option value=""></option>
                  <option value="0">一般用户</option>
                  <option value="0">数据编辑者</option> -->
          </select>
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">上级名称</label>
        <div class="layui-input-block">
          <input id="superior" type="text" name="superior" readonly lay-verify="title" autocomplete="off"
            placeholder="请输入分组名称" class="layui-input">
        </div>
      </div>

      <div class="layui-form-item">
        <div class="layui-input-block">
          <button type="submit" class="layui-btn layui-btn-normal saveGroup" lay-submit=""
            lay-filter="create">创建</button>
        </div>
      </div>
    </form>
  </div>
  <!-- 存放用户的id -->
  <input id="hideId" type="hidden" value="">
  <script src="../../JS/jquery-2.0.3.js"></script>
  <script src="../../layui/layui.js" charset="utf-8"></script>
  <script src="../../layui/lay/modules/layer.js"></script>
  <script src="../../JS/ztreev3/js/jquery.ztree.all.js"></script>
  <script src="../../JS/User/UserManage.js"></script>
  <script>
    var name = '';
    var gINdex = null;
    var uINdex = null;
    var form = null;
    layui.use(['element', 'layer', 'form'], function () {
      var element = layui.element;
      var layer = layui.layer;
      form = layui.form;

      //监听导航点击
      element.on('nav(demo)', function (elem) {
        layer.msg(elem.text());
      });
      // 用户修改
      // 更新
      form.on('submit(update)', function (data) {
        // console.log(data.field)
        var userId = $('#hideId').val()
        $.ajax({
          type: 'POST',
          url: parent.defaultUrl + '/updateUser',
          data: JSON.stringify({
            "id": userId,
            "userName": data.field.username,
            "userCount": data.field.nickname,
            "userSex": data.field.sexy,
            "userGroup": parseInt(data.field.dept),
            "userPhone": data.field.phone,
            "userMail": data.field.emails,
          }),
          dataType: 'json',
          contentType: 'application/json',
          xhrFields: {
            withCredentials: true // 这里设置了withCredentials
          },
          success: function (res) {
            window.parent.location.reload();
          }
        })
        layer.msg('更新成功！')
      })
      // 重置密码
      form.on('submit(reset)', function (data) {
        $.ajax({
          type: 'POST',
          url: parent.defaultUrl + '/updateUser',
          data: JSON.stringify({
            "id": ID,
            "userCode": '123456',
          }),
          dataType: 'json',
          contentType: 'application/json',
          xhrFields: {
            withCredentials: true // 这里设置了withCredentials
          },
          success: function (res) {
            layer.msg('重置密码成功！')
            layer.close(mIndex)
          }
        })
        return false;
      })
      //  用户添加按钮
      //监听提交
      form.on('submit(increase)', function (data) {
        if (data.field.username == '') {
          layer.msg("用户名不能为空！");
          return false;
        }
        if (data.field.nickname == '') {
          layer.msg("昵称不能为空！");
          return false;
        }
        if (!(/^1[3456789]\d{9}$/.test(data.field.phone))) {
          layer.msg("手机号错误！");
          return false;
        }
        //验证邮箱
        var reg = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;
        if (!reg.test(data.field.emails)) {
          layer.msg("邮箱格式错误！");
          return false;
        }
        parent.ajaxPost(parent.defaultUrl + '/regist',
          {
            userCount: data.field.username,
            userName: data.field.nickname,
            userCode: '123456',
            userSex: data.field.sex,
            userGroup: node.id,
            userPhone: data.field.phone,
            userMail: data.field.emails,
            rid: 1
          },
          function (res) {
            if (res.code === 200) {
              var name = res.data.userName;
              var newNode = zTreeObj.addNodes(node, { pId: node.id, name: name, id: res.data.id });
              parent.layer.msg("添加成功！");
              // 表格重载
              reload()
              layer.close(uINdex);
            } else if (res.message) {
              parent.layer.msg(res.message);
            }
          }
        )
        return false;
      });
      //  分组添加的按钮
      //监听提交
      form.on('submit(create)', function (data) {
        // 获取新分组的名称
        var newNode;
        var name = $('#gName').val()
        var roleId = $("#roleAdd").val();
        if (node && node != null) {
          // nextLevel(e,id,node)
          parent.ajaxPost(parent.defaultUrl + '/groupAdd',
            {
              'groupname': name,
              'parentid': node.id,
              'roleId': roleId
            },
            function (res) {
              zTreeObj.addNodes(node, { isParent: true, pId: res.data.parentid, name: res.data.groupname, id: res.data.id });
            })
        } else {
          parent.ajaxPost(parent.defaultUrl + '/groupAdd',
            {
              'groupname': name,
              'parentid': 0,
              'roleId': roleId
            },
            function (res) {
              zTreeObj.addNodes(null, { isParent: true, pId: res.data.parentid, name: res.data.groupname, id: res.data.id }, true);
            })
        }
        layer.msg('添加分组成功！')
        layer.close(gINdex);
        return false;
      });


    });
    // $(function () {
    $('.showGruop').click(function () {
      if ($('.layui-col-md2').css('display') !== 'none') {
        $(this).text('显示分组');
        $('.layui-col-md2').hide().animate({ 'left': '-250px' }, 100)
        $('.layui-col-md10').animate({ 'marginLeft': '0px' }, 100)
      } else {
        $(this).text('隐藏分组');
        $('.layui-col-md2').show().animate({ 'left': '0px' }, 100)
        $('.layui-col-md10').animate({ 'marginLeft': '240px' }, 100)
      }
    })
    // })


    // 点击删除分组
    function delgroup() {
      //询问框
      layer.confirm('确认删除', {
        skin: "layerCls",
        btn: ['继续', '取消'] //按钮
      }, function (index) {
        parent.ajaxPost(parent.defaultUrl + '/groupDel',
          {
            'id': node.id,
            'parentid': node.parentgroupid
          },
          function (res) {
            zTreeObj.removeNode(node);
            // console.log(res)
            layer.close(index);
          })
      }, function (index) {
        layer.close(index);
      });

    }
    // 添加节点组弹窗
    function addgroup() {
      parent.ajaxPost(parent.defaultUrl + '/role_list', { 'ispage': false }, function (res) {
        $("#roleAdd").empty();
        var t = '';
        var str = '';
        for (var i = 0; i < res.data.length; i++) {
          for (var key in res.data[i]) {
            t = '<option value="' + res.data[i].id + '">' + res.data[i].role + '</option>'
          }
          str += t
        }
        $("#roleAdd").append(str)
        form.render('select');
      })
      gINdex = layer.open({
        type: 1,
        skin: 'layerCls',
        title: ['添加分组', 'font-size:18px;color:#fff;'],
        content: $("#Grouppopup"),
        area: ['480px', '300px'],
      })
      if (node && node != null) {
        $('#superior').val(node.name);
      } else {
        $('#superior').val('根节点');
      }

    }
    // 添加节点
    function addUser() {
      uINdex = layer.open({
        type: 1,
        skin: 'layerCls',
        title: ['添加用户', 'font-size:18px;color:#fff;'],
        content: $("#Userpopup"),
        area: ['480px', '540px'],
      })
      // 获取部门的下拉选择
      $('#dep').val(node.name)
    }
    // 解锁
    $('.unlock').click(function () { 
      var correctnick = $('#correctnick').val()
      debugger
      $.ajax({
          type: 'post',
          url: parent.defaultUrl + '/lockUser',
          data: JSON.stringify({
            'userCount': correctnick,
            'userStatus': 0
          }),
          dataType: 'json',
          contentType: 'application/json',
          xhrFields: { withCredentials: true },
          success: function (res) {
            debugger
            parent.layer.msg(res.message)
            layer.close(mIndex)
          }
        })
     })
  </script>
</body>

</html>